import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { AnyObject } from '@/types'
import { getOperateRecordPeopleList, getRevokeInsuranceList } from '@/api/insurance/period'
import type { OperateRecordDto } from '@/api/insurance/period/types'
import { PlanTypeCnEnum } from '@/const/enum'
import { VxeColumn, VxeTable } from 'vxe-table'
import DialogAlreadyRevokedList from './DialogAlreadyRevokedList'
import { Button, Popover } from 'ant-design-vue'

@Component
export class DialogRevokeList extends TableRender {
    @Prop() show!: boolean
    @Prop() companyName!: string

    noTablePadding = true
    noFilterPadding = true

    showDialog = false
    showDialogDetail = false
    showAlreadyDialog = false
    curItem = {} as OperateRecordDto

    peopleList = [] as OperateRecordDto[]

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
        this.show && this.reloadPage(1)
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '公司名称',
            width: 200
        },
        {
            field: 'operationType',
            title: '操作类型',
            formatter: ({ row }) => {
                return row.operationType ? '减保' : '加保'
            }
        },
        {
            field: 'total',
            title: '人数',
            slots: {
                default: ({ row }) => {
                    return (
                        <Popover
                            placement="right"
                            onBefore-enter={() => this.onInitPeopleList(row)}
                            v-slots={{
                                default: () => {
                                    return <>{this.renderPeopleList()}</>
                                },
                                content: () => {
                                    return (
                                        <Button type="link">
                                            {row.total}
                                        </Button>
                                    )
                                }
                            }}
                        ></Popover>
                    )
                }
            }
        },
        {
            field: 'companyPlanName',
            title: '方案名称',
            width: 160
        },
        {
            field: 'type',
            title: '方案类型',
            formatter: ({ row }) => {
                return PlanTypeCnEnum[row.type]
            }
        },
        {
            field: 'insurStartDate',
            title: '生效时间'
        },
        {
            field: 'createTime',
            title: '录入时间',
            width: 160
        },
        {
            field: 'managerName',
            title: '录入人'
        },
        {
            field: 'isSuccess',
            title: '状态',
            formatter: ({ row }) => {
                return row.isSuccess ? '成功' : '失败'
            }
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            params: {
                buttons: [
                    {
                        text: '撤销',
                        event: (row) => this.onShowDetail(row)
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<OperateRecordDto>

    async onInitPeopleList(row: OperateRecordDto) {
        const res = await getOperateRecordPeopleList({
            id: row.id,
            companyPlanId: row.companyPlanId,
            pageNum: 1,
            pageSize: 9999
        })
        this.peopleList = res.rows
    }

    onShowDetail(row: OperateRecordDto) {
        console.log(111, row)
    }

    onShowAlready() {
        this.showAlreadyDialog = true
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.companyName) return []
        return getRevokeInsuranceList({
            pageNum: page,
            pageSize: size,
            companyName: this.companyName,
            ...filters
        })
    }

    renderPeopleList() {
        return (
            <>
                <VxeTable data={this.peopleList}>
                    <VxeColumn title="姓名" field="userName"></VxeColumn>
                    <VxeColumn title="身份证号" width="200" field="idCardNo"></VxeColumn>
                </VxeTable>
            </>
        )
    }

    render() {
        return (
            <>
                <Dialog
                    v-model={this.showDialog}
                    title=""
                    width="800px"
                    v-slots={{
                        header: () => {
                            return (
                                <div class="flex justify-between text-lg">
                                    <div>保单可撤销列表</div>
                                    <Button type="link" onClick={this.onShowAlready}>
                                        撤销记录
                                    </Button>
                                </div>
                            )
                        },
                        default: () => {
                            return <div>{super.renderTable()}</div>
                        }
                    }}
                ></Dialog>
                <DialogAlreadyRevokedList v-model:show={this.showAlreadyDialog} companyName={this.companyName} />
            </>
        )
    }
}

export default toNative<{ companyName: string }, {}>(DialogRevokeList)
